<template>
  <div class="app-container">
    <h2 class="con-title">售后列表</h2>
    <div class="btn-box">
    </div>
    <div class="source">
      <div class="input-line">
        <div class="input-inline">
          <label class="input-label">售后编号：</label>
          <div class="el-input" style="width:180px">
            <input type="text" autocomplete="off" placeholder="请输入内容" class="el-input__inner" v-model="listQuery.returnCode">
          </div>
        </div>
        <div class="input-inline">
          <label class="input-label">关联订单号：</label>
          <div class="el-input" style="width:180px">
            <input type="text" autocomplete="off" placeholder="请输入内容" class="el-input__inner" v-model="listQuery.orderCode">
          </div>
        </div>
        <div class="input-inline">
          <label class="input-label">物流单号：</label>
          <div class="el-input" style="width:180px">
            <input type="text" autocomplete="off" placeholder="请输入内容" class="el-input__inner" v-model="listQuery.expressNumber">
          </div>
        </div>
      </div>
      <div class="input-line">
        <div class="input-inline">
          <label class="input-label">售后类型：</label>
          <div class="el-input" style="width:180px">
            <el-select v-model="listQuery.returnType" clearable placeholder="请选择">
              <el-option v-for="item in option1" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="input-inline">
          <label class="input-label">收件人姓名：</label>
          <div class="el-input" style="width:180px">
            <input type="text" autocomplete="off" placeholder="请输入内容" class="el-input__inner" v-model="receiverName">
          </div>
        </div>
        <div class="input-inline">
          <label class="input-label">收件人手机号：</label>
          <div class="el-input" style="width:180px">
            <input type="text" autocomplete="off" placeholder="请输入内容" class="el-input__inner" v-model="listQuery.orderPhone">
          </div>
        </div>
      </div>
      <div class="input-line">
        <!--<div class="input-inline">
          <label class="input-label">售后状态：</label>
          <div class="el-input" style="width:180px">
            <el-select v-model="value2" clearable placeholder="请选择">
              <el-option v-for="item in option2" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>-->
        <div class="input-inline">
          <label class="input-label">下单时间：</label>
          <div class="el-input" style="width:180px">
            <el-date-picker v-model="listQuery.startDate" type="date" placeholder="选择日期" :picker-options="pickerOptions1" value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>
          <div class="form-mid">-</div>
          <div class="el-input" style="width:180px">
            <el-date-picker v-model="endDate" type="date" placeholder="选择日期" :picker-options="pickerOptions2" value-format="yyyy-MM-dd">
            </el-date-picker>
          </div>
        </div>
      </div>
      <el-button type="primary" icon="el-icon-search" style="position: absolute;top:20px;right:20px;" size="small" @click="searchSubmit">搜索</el-button>
    </div>
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane v-for="item in returnCountList" :label="item.orderTitle+'（'+item.orderNum+'）'" :key='item.returnStatus' :name='item.returnStatus+""'>
        <tab-customer ref="tabCustomer" v-if='activeName==item.returnStatus' :returnStatus='item.returnStatus' :returnList='listQuery' @create='showCreatedTimes'></tab-customer>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getOrderReturnCount } from '@/api/list'
import tabCustomer from './components/tabCustomer'

export default {
  components: {
    tabCustomer
  },
  data() {
    return {
      returnCountList: [],
      activeName: '0',
      createdTimes: 0,
      value1: '',
      value2: '',
      total: 100,
      listLoading: true,
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e7
        }
      },
      pickerOptions2: {
        disabledDate: (time) => {
          return time.getTime() < this.value1
        }
      },
      option1: [{
        value: '1',
        label: '仅退款'
      }, {
        value: '2',
        label: '退款退货'
      }],
      receiverName: '',
      listQuery: {
        pageIndex: 1,
        pageSize: 20,
        returnCode: '',
        orderCode: '',
        expressNumber: '',
        returnType: '',
        receiverName: '',
        orderPhone: '',
        returnStauts: '',
        startDate: '',
        endDate: ''
      },
      endDate: ''
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    showCreatedTimes() {
      this.createdTimes = this.createdTimes + 1
    },
    // 列表加载
    fetchData() {
      getOrderReturnCount().then(res => {
        this.returnCountList = res.data.returnCountList
      })
    },
    searchSubmit() {
      // 结束日期加一天
      if (this.endDate !== '') {
        const date = new Date(this.endDate)
        // 加一天
        const time = date.setDate(date.getDate() + 1)
        // 使用filters 里使用
        this.listQuery.endDate = this.$options.filters.formatDate(time, 'yyyy-MM-dd')
      }
      this.listQuery.pageIndex = 1
      this.listQuery.receiverName = encodeURI(this.receiverName)
      this.$refs.tabCustomer[0].getReturn()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
  @import 'src/assets/css/jx-order.scss';
</style>